import Vue from "vue";
import $ from "jquery";
import autoplay from "./autoplaymusic";
let ctrlPlay = {};
ctrlPlay.Temp = `
  <div class="music" v-if="music">
      <audio :src="music" autoplay="autoplay" id="bg_music"></audio>
      <div  v-on:click="playMusic" id="musicCtrl" class="music_ctrl">
        <img src="/img/activity/btn_play_music.png" alt="">
      </div>
  </div>
`;
let CtrlPlay = Vue.extend({
  template: ctrlPlay.Temp,
  props: ["music"],
  mounted(){
    if(this.music){
      autoplay();//音乐自动播放
    }
  },
  methods: {
    playMusic: function () {
      let player = document.getElementById("bg_music");
      //	判断是否暂停
      if (player.paused) {
        player.play();
        $(".music_ctrl")
          .css("animation-play-state", "running")
          .find("img")
          .attr("src", "/img/activity/btn_play_music.png");
      } else {
        player.pause();
        $(".music_ctrl")
          .css("animation-play-state", "paused")
          .find("img")
          .attr("src", "/img/activity/btn_stop_music.png");
      }
    },
  }
});
export default CtrlPlay;
